<template>
  <div id="region-year">
    <!-- 编辑区域 年限 -->
    <div class="tages-content">
      <div class="top-bg">
        <van-nav-bar class="header"
                     fixed
                     :border="false"
                     @click-left="diffBack"
                     @click-right="confirmEdit">
          <div class="left"
               slot="left">
            <van-icon name="arrow-left"
                      size="24px"
                      color="#fff" />
          </div>
          <div class="title"
               slot="title">{{title}}</div>
          <div class="right"
               slot="right">完成</div>
        </van-nav-bar>
      </div>
      <div class="reset-wrapper">
        <div class="reset-content">
          <div v-if="fromW=='fromRegion'">
            <div class="area-input bgwrite"> <input v-model="inputContent" readonly
                     type="text"
                     @click="editArea"
                     :placeholder="areaP"></div>
            <van-popup v-model="showPop"
                       position="bottom"
                       :overlay="true">
              <div class="address-popup"
                   style="">
                <div class="title-case fz4 flex">
                  <div style="width: 20%;" @click="cancelArea">取消</div>
                                  <div style="width: 60%;text-align: center;">选择地址</div>
                                  <div style="width: 20%; text-align: right;" @click="confirmArea">确定</div>
                </div>
                <div class="address-select fz4 flex">
                  <div class="select-list">
                    <!-- <div class="select-value"
                       
                         @click="showProv=true">{{prov}}</div> -->
                    <ul>
                      <li v-for="option in proArr"
                          :class="{'choose':provinceUid==option.provinceUid}"
                          @click="chooseProv(option.provinceUid,option.provinceName)"
                          :key="option.provinceUid">{{option.provinceName}}</li>
                    </ul>
                  </div>
                  <div class="select-list">
                    <!-- <div class="select-value">{{city}}</div> -->
                    <ul>
                      <li v-for="option in cityArr"
                          :class="{'choose':cityUid==option.cityUid}"
                          @click="chooseCity(option.cityUid,option.cityName)"
                          :key="option.cityUid">{{option.cityName}}</li>
                    </ul>
                  </div>
                  <div class="select-list">
                    <!-- <div class="select-value">{{district}}</div> -->
                    <ul>
                      <li v-for="option in districtArr"
                          :class="{'choose':areaUid==option.areaUid}"
                          @click="chooseArea(option.areaUid,option.areaName)"
                          :key="option.areaUid">{{option.areaName}}</li>
                    </ul>
                  </div>
                  <!-- <select v-model="prov" placeholder="省">
                    <option v-for="option in proArr"
                            :value="option.provinceUid">
                      {{ option.provinceName }}
                    </option>
                  </select>
                  <select v-model="city"
                          v-if="city"
                          >
                    <option v-for="option in cityArr"
                            :value="option.cityUid">
                      {{ option.cityName }}
                    </option>
                  </select>
                  <select v-model="district"
                          v-if="district">
                    <option v-for="option in districtArr"
                            :value="option.areaUid">
                      {{ option.areaName }}
                    </option>
                  </select> -->
                </div>
              </div>
            </van-popup>
          </div>
          <div v-if="fromW=='fromYear'">
            <div class="area-input bgwrite"> <input v-model="inputContent" readonly
                     type="text"
                     @click="editYear"
                     :placeholder="areaPY"></div>
            <van-popup v-model="showPopY"
                       position="bottom"
                       :overlay="true">
              <van-picker show-toolbar
                          title="编辑年限"
                          :columns="ListYear"
                          @cancel="cancelYear"
                          @confirm="confirmYear"/>
            </van-popup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      fromW: "",
      content: "",
      year: "年",
      ListYear: [
        {
          defaultIndex: 1,
          text: "1年",
        },
        {
          defaultIndex: 2,
          text: "2年",
        },
        {
          defaultIndex: 3,
          text: "3年",
        },
        {
          defaultIndex: 4,
          text: "4年",
        },
        {
          defaultIndex: 5,
          text: "5年",
        },
        {
          defaultIndex: 6,
          text: "6年",
        },
        {
          defaultIndex: 7,
          text: "7年",
        },
        {
          defaultIndex: 8,
          text: "8年",
        },
        {
          defaultIndex: 9,
          text: "9年",
        },
        {
          defaultIndex: 10,
          text: "10年",
        }
      ],
      showPop: false,
      showPopY: false,
      adddress: "",
      areaP: "请选择地址",
      areaPY: "请选择年限",
      inputContent: "",
      inputContentp: "请选择年限",
      provinceName: "",
      provinceUid: "",
      cityName: "",
      cityUid: "",
      areaName: "",
      areaUid: "",
      proArr: [],
      cityArr: [],
      districtArr: [],
      resumeAreaInfos:{
        provinceUid: "",
        cityUid: "",
        areaUid: "",
        number: 0
      },
      //   showProv: false,
      showCity: false,
      showDistrict: false,
      yearIndex:'0'
    };
  },
  computed:{
    ...mapState({
      allResume: state=> state.allResume
    })
  },
  created() {
    console.log(this.allResume)
    this.fromW = this.$route.params.info
    this.content = this.$route.params.content
    if (this.fromW == "fromRegion") {
      this.title = "编辑区域";
      if (this.content == "") {
        this.areaP = "请选择地址"
      } else if (this.content !== "") {
        this.inputContent = this.content
      }
      this.selectProvinces();
    } else if (this.fromW == "fromYear") {
      this.title = "编辑年限";
      if (this.content == "" || this.content == null) {
        this.areaPY = "请选择年限"
      } else if (this.content !== "") {
        this.inputContent = this.content +"年"
      }
    }
  },
  watch: {},
  methods: {
    // 获取地址省
    async selectProvinces() {
      const SPC = await HTTP("selectProvinces", {});
      if (SPC.code == 200) {
        this.proArr = SPC.data;
        if (this.content == ""){
          this.provinceName = this.proArr[0].provinceName;
          this.provinceUid = this.proArr[0].provinceUid;
        } else if (this.content != "") {
          this.provinceName = this.allResume.resumeAreaInfos.provinceName;
          this.provinceUid = this.allResume.resumeAreaInfos.provinceUid;
        }
        this.selectCitys(this.provinceUid);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址市
    async selectCitys(provinceUid) {
      const SPC = await HTTP("selectCitys", {
        provinceUid: provinceUid
      });
      if (SPC.code == 200) {
        this.cityArr = SPC.data;
        if (this.content == ""){
          this.cityName = this.cityArr[0].cityName;
          this.cityUid = this.cityArr[0].cityUid;
        } else if (this.content != "") {
          this.cityName = this.allResume.resumeAreaInfos.cityName;
          this.cityUid = this.allResume.resumeAreaInfos.cityUid;
        }
        this.selectArea(this.cityUid);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址区
    async selectArea(cityUid) {
      const SPC = await HTTP("selectArea", {
        cityUid: cityUid
      });
      if (SPC.code == 200) {
        this.districtArr = SPC.data;
        if (this.content == ""){
          this.areaName = this.districtArr[0].areaName;
          this.areaUid = this.districtArr[0].areaUid;
        } else if (this.content != "") {
          this.areaName = this.allResume.resumeAreaInfos.areaName;
          this.areaUid = this.allResume.resumeAreaInfos.areaUid;
        }
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    chooseProv(provinceUid, provinceName) {
      // this.showProv=false
      this.provinceUid = provinceUid;
      this.provinceName = provinceName;
      this.selectCitys(provinceUid);
    },
    chooseCity(cityUid, cityName) {
      this.cityUid = cityUid;
      this.cityName = cityName;
      this.selectArea(cityUid);
    },
    chooseArea(areaUid, areaName) {
      this.areaUid = areaUid;
      this.areaName = areaName;
    },
    diffBack() {
      this.$router.push("/performance/myIntroduction");
    },
    // 取消编辑区域
    cancelArea() {
      this.showPop = false
    },
    // 确定编辑
    confirmArea() {
      this.inputContent = this.provinceName + this.cityName + this.areaName
      this.showPop = false
      this.resumeAreaInfos.provinceUid = this.provinceUid
      this.resumeAreaInfos.cityUid = this.cityUid
      this.resumeAreaInfos.areaUid = this.areaUid
    },
    // 添加简历 - 年限
    async addResumeYear() {
      const SPC = await HTTP("addResume", {
          userUid: getuserUid(),
          createBy: getuserUid(),
          workYears: this.yearIndex,
          resumeStylesInfos: null,
          resumeTypesInfos: null,
          resumeAreaInfos: null,
          workHistorys: null,
          resumeSkillInfos: null
      });
      if (SPC.code == 200) {
       this.$router.push("/performance/myIntroduction");
       this.$toast('添加成功')
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 添加简历 - 地区
    async addResumeArea() {
      if(this.resumeAreaInfos.provinceUid == ""&& this.resumeAreaInfos.cityUid == "" &&  this.resumeAreaInfos.areaUid == "") {
        this.resumeAreaInfos.provinceUid = this.provinceUid
        this.resumeAreaInfos.cityUid = this.cityUid
        this.resumeAreaInfos.areaUid = this.areaUid
      }
      const SPC = await HTTP("addResume", {
          userUid: getuserUid(),
          createBy: getuserUid(),
          workYears: "",
          resumeStylesInfos: null,
          resumeTypesInfos: null,
          resumeAreaInfos: this.resumeAreaInfos,
          workHistorys: null,
          resumeSkillInfos: null
      });
      if (SPC.code == 200) {
       this.$router.push("/performance/myIntroduction");
       this.$toast('添加成功')
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    confirmEdit() {
      // 调取接口 返回 编辑简历页面 需要判断是否为空
      if (this.inputContent == "") {
        if (this.fromW == "fromRegion") {
          this.$toast({
            message: "地址不能为空"
          });
        } else if (this.fromW == "fromYear") {
          this.$toast({
            message: "年限不能为空"
          });
        }
      } else if (this.inputContent != "") {
        if (this.fromW == "fromRegion") {
          if (this.content == "") {
            // 添加接口
            this.addResumeArea()
          } else if (this.content !== "") {
            // 修改接口
            this.addResumeArea()
          }
        } else if (this.fromW == "fromYear") {
          if (this.content == "") {
            // 添加接口
            this.addResumeYear()
          } else if (this.content !== "") {
            // 修改接口
            this.addResumeYear()
          }
        }
      }
    },
    // 编辑区域
    editArea() {
      this.showPop = true;
    },
    // 编辑年限
    editYear() {
      this.showPopY = true;
    },
    // 编辑年限
    cancelYear() {
      this.showPopY = false;
    },
    // 编辑年限
    confirmYear(val) {
      this.inputContent = val.text;
      this.yearIndex = val.defaultIndex
      this.showPopY = false;
    }
  }
};
</script>
<style>
</style>

<style lang="scss" scoped>
#region-year {
  position: absolute;
  width: 100%;
  height: 100%;
  .tages-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    .top-bg {
      width: 100%;
      background: #fff;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      .header {
        background: #5e8efe;
        color: #ffffff;
        height: 0.92rem;
        .title {
          color: #ffffff;
          font-size: 0.35rem;
        }
        .right {
          font-size: 0.32rem;
          height: 0.92rem;
          line-height: 1rem;
        }
      }
    }
    .reset-wrapper {
      position: fixed;
      width: 100%;
      top: 0.92rem;
      left: 0;
      right: 0;
      overflow-y: scroll;
      bottom: 0rem;
      .reset-content {
        width: 100%;
        padding: 0.24rem;
        box-sizing: border-box;
        border-radius: 0.1rem;
        .area-input {
          box-sizing: border-box;
          padding: 0.36rem;
          width: 100%;
          border-radius: 0.1rem;
          input {
            width: 100%;
            border: none;
            font-size: 0.3rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #282828;
          }
        }
        .title-case {
          padding: 0 0.24rem;
          height: 1rem;
          line-height: 1rem;
          justify-content: space-between;
        }
        .address-popup {
          .address-select {
            height: 8rem;
            overflow: hidden;
            .select-list {
              height: 8rem;
              overflow: scroll;
              width: calc(100% / 3);
              text-align: center;
              ul {
                li {
                  line-height: 0.46rem;
                }
                .choose {
                  color: $color-primary;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
